<template>
  <div>
    <h1>Message 消息提示</h1>
    <p>常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。</p>
    <h2>基础用法</h2>
    <Button type="primary" @click="btnInfoClick">打开消息提示</Button>
    <Button type="primary" @click="openVn">VNode</Button>
    <p>从顶部出现，<code>3</code> 秒后自动消失。</p>
    <p>注册一个 <code>$message</code> 方法用于调用，<code>Message</code> 可以接收一个字符串或一个 <code>VNode</code> 作为参数，它会被显示为正文内容。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button @click=&quot;btnInfoClick&quot;&gt;打开消息提示&lt;/Button&gt;
        &lt;Button @click=&quot;openVn&quot;&gt;VNode&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        methods:{
          btnInfoClick() {
            this.$message({
              type:'info',
              message: '这是一条默认提示信息'
            })
          },
          openVn() {
            const h = this.$createElement;
            this.$message({
              render: h => {
                return h('span', [
                  'This is created by ',
                  h('a', 'render'),
                  ' function'
                ])
              }
            })
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>不同状态</h2>
    <Button type="primary" @click="btnSuccessClick">成功</Button>
    <Button type="primary" @click="btnInfoClick">消息</Button>
    <Button type="primary" @click="btnWarningClick">警告</Button>
    <Button type="primary" @click="btnErrorClick">错误</Button>
    <p>当需要自定义更多属性时， <code>Message</code> 也可以接收一个对象为参数。</p>
    <p>设置 <code>type</code>字段可以定义不同的状态，默认为 <code>info</code> 。此时正文内容以 <code>message</code> 的值传入。</p>
    <p>同时，我们也为 <code>Message</code> 的各种 <code>type</code> 注册了方法，可以在不传入 <code>type</code> 字段的情况下像 <code>btnErrorClick</code> 那样直接调用。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button @click=&quot;btnSuccessClick&quot;&gt;成功&lt;/Button&gt;
        &lt;Button @click=&quot;btnInfoClick&quot;&gt;消息&lt;/Button&gt;
        &lt;Button @click=&quot;btnWarningClick&quot;&gt;警告&lt;/Button&gt;
        &lt;Button @click=&quot;btnErrorClick&quot;&gt;错误&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        methods:{
          btnInfoClick() {
            this.$message({
              type:'info',
              message: '这是一条默认提示信息'
            })
          },
          btnSuccessClick() {
            this.$message({
              type: 'success',
              message: '恭喜你，这是一条成功消息'
            })
          },
          btnWarningClick() {
            this.$message({
              type: 'warning',
              message: '警告哦，这是一条警告消息'
            })
          },
          btnErrorClick() {
            this.$message({
              type: 'error',
              message: '错了哦，这是一条错误消息'
            })
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>可关闭</h2>
    <Button type="primary" @click="btnSuccessClick1">成功</Button>
    <Button type="primary" @click="btnInfoClick1">消息</Button>
    <Button type="primary" @click="btnWarningClick1">警告</Button>
    <Button type="primary" @click="btnErrorClick1">错误</Button>
    <p>默认的 <code>Message</code> 是不可以被人工关闭的，如果需要可手动关闭的 <code>Message</code> ，可以使用 <code>showClose</code> 字段。</p>
    <p>此外，<code>Message</code> 拥有可控的 <code>duration</code> ，设置 <code>0</code> 为不会被自动关闭，默认为 <code>3000</code> 毫秒。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button @click=&quot;btnSuccessClick1&quot;&gt;成功&lt;/Button&gt;
        &lt;Button @click=&quot;btnInfoClick1&quot;&gt;消息&lt;/Button&gt;
        &lt;Button @click=&quot;btnWarningClick1&quot;&gt;警告&lt;/Button&gt;
        &lt;Button @click=&quot;btnErrorClick1&quot;&gt;错误&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        methods:{
          btnSuccessClick1() {
            this.$message({
              type: 'success',
              message: '恭喜你，这是一条成功消息',
              duration:0,
              showClose:true
            })
          },
          btnInfoClick1() {
            this.$message({
              type:'info',
              message: '这是一条消息提示',
              duration:0,
              showClose:true
            })
          },
          btnWarningClick1() {
            this.$message({
              type: 'warning',
              message: '警告哦，这是一条警告消息',
              duration:0,
              showClose:true
            })
          },
          btnErrorClick1() {
            this.$message({
              type: 'error',
              message: '错了哦，这是一条错误消息',
              duration:0,
              showClose: true
            })
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>文字居中</h2>
    <Button type="primary" @click="open">文字居中</Button>
    <P>使用 <code>center</code> 属性让文字水平居中。</P>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button @click=&quot;open&quot;&gt;文字居中&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        methods:{
          open() {
            this.$message({
              type: 'info',
              message: '居中的文字',
              center: true
            })
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Message props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
  </div>
</template>
<script>
export default {
  name: 'testMessage',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type',
          tooltip: true
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'message',
          explain: '消息文字',
          type: 'string / VNode',
          default: '-'
        },
        {
          attribute: 'type',
          explain: '主题',
          type: 'String | success、warning、info、error',
          default: 'info'
        },
        {
          attribute: 'iconClass',
          explain: '自定义图标的类名，会覆盖 type',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'duration',
          explain: '显示时间, 毫秒。设为 0 则不会自动关闭',
          type: 'number',
          default: '3000'
        },
        {
          attribute: 'center',
          explain: '文字是否居中',
          type: 'Boolen',
          default: 'false'
        },
        {
          attribute: 'showClose',
          explain: '是否显示关闭按钮',
          type: 'Boolen',
          default: 'false'
        }
      ]
    }
  },
  methods: {
    btnInfoClick () {
      this.$message({
        type: 'info',
        message: '这是一条消息提示',
        duration: 3
      })
    },
    openVn () {
      this.$message({
        render: h => {
          return h('span', [
            'This is created by ',
            h('a', 'render'),
            ' function'
          ])
        }
      })
    },
    btnSuccessClick () {
      this.$message({
        type: 'success',
        message: '恭喜你，这是一条成功消息'
      })
    },
    btnWarningClick () {
      this.$message({
        type: 'warning',
        message: '警告哦，这是一条警告消息'
      })
    },
    btnErrorClick () {
      this.$message({
        type: 'error',
        message: '错了哦，这是一条错误消息'
      })
    },
    btnSuccessClick1 () {
      this.$message({
        type: 'success',
        message: '恭喜你，这是一条成功消息',
        duration: 0,
        showClose: true
      })
    },
    btnInfoClick1 () {
      this.$message({
        type: 'info',
        message: '这是一条消息提示',
        duration: 0,
        showClose: true
      })
    },
    btnWarningClick1 () {
      this.$message({
        type: 'warning',
        message: '警告哦，这是一条警告消息',
        duration: 0,
        showClose: true
      })
    },
    btnErrorClick1 () {
      this.$message({
        type: 'error',
        message: '错了哦，这是一条错误消息',
        duration: 0,
        showClose: true
      })
    },
    open () {
      this.$message({
        type: 'info',
        message: '居中的文字',
        center: true
      })
    }
  }
}
</script>
<style scoped lang="less">
.testMessage {
  width: 500px;
  height: 60px;
  display:flex;
  align-items: center;
}
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 5px 0;
}
</style>
